<template>
    <el-row justify="end">
    <el-button @click="openForm">
      <Icon class="mr-5px" icon="ep:edit" />
      {{ patent.id ? '编辑专利' : '新增专利' }}
    </el-button>
  </el-row>
  <label class="font-bold">专利信息</label>
  <PatentItemsList :key="patentItemsListRefKey" ref="patentItemsListRef" :patent="patent" />
  <ContentWrap>
    <el-collapse v-model="activeNames" class="">
      <el-collapse-item name="systemInfo">
        <template #title>
          <span class="text-base font-bold">系统信息</span>
        </template>
        <el-descriptions :column="4">
          <el-descriptions-item label="创建人">{{ patent.creatorName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(patent.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="修改人">{{ patent.updaterName }}</el-descriptions-item>
          <el-descriptions-item label="修改时间">
            {{ formatDate(patent.updateTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </ContentWrap>
    <!-- 表单弹窗：添加 -->
    <PatentForm ref="formRef" @success="refresh" />
</template>
<script lang="ts" setup>
import { PatentApi,PatentVO } from '@/api/crm/patent'
import * as CustomerApi from '@/api/crm/customer'
import PatentItemsList from '@/views/crm/patent/components/PatentItemsList.vue'
import { formatDate } from '@/utils/formatTime'
import PatentForm from '@/views/crm/patent/PatentForm.vue'
const formRef = ref()
const openForm = () => {
  formRef.value.open(patent.value.id ? 'update' : 'create', patent.value.id, customer.id)
}
defineOptions({ name: 'PatentDetail' })
const { customer } = defineProps<{
  customer: CustomerApi.CustomerVO // 客户明细
}>()
const patentItemsListRefKey = ref(new Date().getTime())
const formLoading = ref(false) // 表单的加载中
const patent = ref<PatentVO>({} as PatentVO) // 专利信息详情

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => customer.id,
  async (val) => {
    if (!val) {
      return;
    }
    try {
      formLoading.value = true
      const data = await PatentApi.getPatentByCustomerId(val)
      if (!data) {
        return
      }
      patent.value = data
    } finally {
      formLoading.value = false
    }
  },
  { immediate: true }
)
const activeNames = ref(['basicInfo', 'systemInfo']) // 展示的折叠面板
const refresh = async () => {
  patentItemsListRefKey.value = new Date().getTime()
  try {
    formLoading.value = true
    const data = await PatentApi.getPatentByCustomerId(customer.id)
    if (!data) {
      return
    }
    patent.value = data
  } finally {
    formLoading.value = false
  }
}
</script>
